<template>
  <div class="articleList">
    <!-- 要直接在视图中绑定vuex才行响应式更新,通过data绑定没有办法更新 -->
    <div class="articleItem" v-for="item in this.$store.state.dataList" :key="item.aid">
      <el-card shadow="hover">
        <div class="top">
          <span @click="itemClick(item.aid,item.title)">{{item.title}}</span>
        </div>
        <div class="bottom">
          <div>
            <el-tag>最新</el-tag>
            <el-tag type="success">热门</el-tag>
          </div>
          <div class="icon-box">
            <label>
              <img src="icon/watch.png" />
              <span>{{item.read}}</span>
            </label>
            <label @click="like(item.aid)">
              <img src="icon/like.png" />
              <span>{{item.like}}</span>
            </label>
            <label>
              <img src="icon/comment.png" />
              <span>{{item.commet}}</span>
            </label>
          </div>
        </div>
      </el-card>
    </div>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="this.$store.state.dataTotal"
      :page-size="5"
      :current-page.sync="currentPage"
      @current-change="pageChange"
    ></el-pagination>
  </div>
</template>

<script>
import { getArticle, alterAinfo } from "@/API/index.js";

export default {
  data() {
    return {
      currentPage: this.$store.state.currentPage,
    };
  },
  mounted() {
    this.getData();

  },

  methods: {
    //获取文章数据
    getData() {
      getArticle(this.currentPage, 5).then((res) => {
        console.log(res);
        //修改vuex中的数据列表
        this.$store.commit("saveData",{data:res.data.data,total:res.data.total,currentPage:this.currentPage});
      });
    },

    //分页器的点击事件
    pageChange() {
      this.getData();
    },

    itemClick(aid, title) {
      console.log(aid);
      //添加面包屑导航的选项
      this.$store.commit("toBread", title);
      this.$router.push("/detail/" + aid);
      // alterAinfo(aid); //点击增加阅读量
    },

    like(aid) {
      alterAinfo(aid, "like").then((res) => {
        console.log("点赞成功啦");
        this.getData();
      });
    },
  },
};
</script>

<style scoped>
.articleList {
  text-align: center;
}
.articleItem {
  height: 15vh;
  margin-bottom: 3vh;
}
.el-card {
  height: 100%;
}
.top span {
  font-size: 20px;
  font-weight: bold;
  color: rgb(32, 32, 32);
}
.top span:hover {
  text-decoration: underline;
}

.bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 5%;
}
/* .bottom label{

} */
.bottom label img {
  width: 30px;
  height: 30px;
}

/* .icon-box{
  display: flex;
  align-items: center;
} */
</style>